<template>
 
    <div class="media_box">
        <a  @click="fGoReview" >
            <div class="media clearfix">
                <div class="media_left fl">
                    <img :src="itemData.images.medium" alt="" class="media-object">
                </div>
                <div class="media_body fl">
                    <span class="fr rating">{{itemData.rating.average}}</span>
                    <h2>{{itemData.title}}</h2>
                    <P>类型: <span v-for="(type,index) in itemData.genres" :key="index">{{type}}&nbsp;&nbsp;</span>&nbsp;&nbsp;&nbsp;&nbsp;上映年份：<span>{{itemData.year}}</span></P>
                    <p>导演:<span v-for="(director,idx) in itemData.directors" :key="idx">{{director.name}}&nbsp;&nbsp;</span></p>
                    <p>主演:<span v-for="(cast,idx) in itemData.casts" :key="idx">{{cast.name}}&nbsp;&nbsp;</span></p>
                </div>
            </div>
        </a>
    </div>
         
</template>
<script>
    import router from '../../router/index'
    
    export default{
        props:['itemData'],
        methods:{
            fGoReview:function(msg){
                if(confirm(`你想要查看   ${this.itemData.title}   的评论吗？`)){
                    router.push('review')
                };
            }
        }
    }
</script>
<style scoped>

.media_box{
    width: 100%;
    margin-bottom: .2rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid #ccc;
}
.media{
    font-size: .16rem;
    color:#333;
    width: 100%;
}
img{
    width: 100%;
    max-width: 185px;
}
.media_left{
    width: 20%;
}
.media_body{
    width: 75%;
}
    h1{
        font-size: .28rem;
        text-align: left;
        border-bottom: 1px solid #ccc;
        padding-left:.1rem;
        padding-bottom: .09rem;
        width: 85%;
        margin:0 auto;
    }
    .media_body{
        margin-left:3%;
    }
    .rating{
        color:red;
        font-weight: bold;
    }
</style>
